.header {
  position: relative;
  padding-top: 40px;
  background-color: var(--footer-bg);
  background-image: url('./../img/header/header-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  // Указываем соотношение сторон, чтобы при изменении ширины экрана пропорции картинки сохранялись (1440 - ширина header по макету, 1084 - его высота)
  aspect-ratio: 1440 / 1084;

  color: var(--header-text-color);

  // Вызываем миксин
  @include retina-bg (url('./../img/header/header-bg@2x.jpg'));

  a {
    color: var(--header-text-color);
  }

  @include mobile {
    padding-top: 20px;
    // Добавляем, чтобы на этом расширении header растянулся в высоту и текст не был на светлом фоне
    padding-bottom: 240px;
    // Убираем соотношение сторон, иначе после добавления нижнего падинга появляется горизонтальная прокрутка, т.к. из-за наличия aspect-ratio блок увеличивается в ширину
    aspect-ratio: unset;
  }
}

.header__nav {
  // margin-bottom: 86px;   - по макету

  // Для адаптива - плавное уменьшение от 86px до 20px с уменьшением размера экрана 
  margin-bottom: clamp(20px, -0.25rem + 7.5vw, 86px);
}

.header__content {
  text-align: center;
}

.header__title {
  margin-bottom: 14px;
  font-weight: 700;
  // font-size: 80px; - это по макету
  // Для адаптивного сайта используем сайт https: //min-max-calculator.9elements.com/ (см. фильм вр.6:45:00)
  font-size: clamp(26px, 0.398rem + 6.14vw, 80px);
  line-height: 130%;
  letter-spacing: -0.01em;
  text-transform: capitalize;
}

.header__content p {
  margin: 0 auto;
  // max-width: 606px; - по макету
  width: clamp(290px, 10.943rem + 35.91vw, 606px);
  // font-size: 24px;  - по макету
  font-size: clamp(12px, 0.477rem + 1.36vw, 24px);
  line-height: 160%;
  opacity: 0.8;
}

.header__search {
  margin: 45px auto 0;
}

// Dots
.header__dot-sofa {
  position: absolute;
  top: calc(685 / (1084 + 10) * 100%); // 10 это поправка для точного позиционирования
  left: calc(296 / (1440 + 30) * 100%); // 30 это поправка для точного позиционирования
}

.header__dot-vase {
  position: absolute;
  top: calc(754 / (1075 + 20) * 100%);
  left: calc(114 / (1410 + 150) * 100%);
}

.header__dot-item {
  position: absolute;
  top: calc(787 / (1084 + 15) * 100%);
  left: calc(810 / (1440 + 15) * 100%);
}

.header__dot-wall {
  position: absolute;
  top: calc(822 / (1084 + 10) * 100%);
  left: calc(1381 / (1440 + 10) * 100%);
}

// Скрываем доты и кнопку поиска при размере экрана менее 900px
@media (max-width: 900px) {

  .header__dot-sofa,
  .header__dot-vase,
  .header__dot-item,
  .header__dot-wall,
  .header__search.search-form {
    display: none;
  }
}